<template>
  <!-- <div class="store">
    <Header title="喜茶百货" right="export"></Header>
    <div class="main"></div>

    <ToLogin :show="show"></ToLogin>
  </div> -->
  <div class="store">
    <Header title="选择门店" left="arrow"></Header>
    <div class="main">
      <van-tabs v-model="active" animated color="#323233">
        <van-tab title="附近门店">
          <div
            class="storeCard row-nowrap center"
            @click="toStore(store)"
            v-for="store in storeList"
            :key="store.storeId"
          >
            <div class="left column">
              <div class="item row-nowrap center font16">
                <van-icon name="star-o" />
                <div class="van-ellipsis">
                  <span class="bold">{{ store.storeName }}</span>
                </div>
              </div>
              <div class="item row-nowrap center font12">
                <van-icon name="location-o" />
                <span>{{ store.address }}</span>
              </div>
              <div class="item row-nowrap center font12">
                <van-icon name="clock-o" />
                <div class="van-ellipsis">
                  <span>{{ store.workTime }}</span>
                </div>
              </div>
              <div class="state">
                <van-tag color="#333" plain v-if="store.state == 1"
                  >营业中</van-tag
                >
                <van-tag color="#333" plain v-else-if="store.state == 2"
                  >门店休息</van-tag
                >
              </div>
            </div>
            <div class="right column center">
              <div class="font12">去下单</div>
              <div class="font12g" v-if="distance(store) != 0">
                距离{{ distance(store) | addZero }}km
              </div>
              <div class="font12g" v-else>正在定位...</div>
              <div class="icons row-nowrap between">
                <div class="icon column center">
                  <van-icon name="phone-o" />
                </div>
                <div class="icon column center">
                  <van-icon name="share-o" />
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="收藏门店"
          ><van-empty description="暂无收藏门店~"
        /></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import storeApi from "@/api/store";
import Header from "../../components/Header";
import Vue from "vue";
import { Tab, Tabs, Empty, Tag, Dialog } from "vant";

Vue.use(Tab).use(Tabs).use(Empty).use(Tag).use(Dialog);
export default {
  name: "store",
  components: {
    Header,
  },
  data() {
    return {
      active: 0,
      storeList: [
        {
          storeId: "1",
          storeName: "茶百道青山湖宝龙店",
          address: "青山湖街道宝龙广场二期一楼茶百道1232131321",
          workTime: "10:00-21:45",
          lng: "120.352564",
          lat: "30.309212",
          state: "1",
          distance: "1.2",
        },
      ],
    };
  },
  filters: {
    addZero(value) {
      return value.toFixed(2);
    },
  },
  computed: {
    location() {
      return this.$store.getters.location;
    },
  },
  mounted() {
    this.getAllStore();
  },
  methods: {
    getAllStore() {
      storeApi.getAllStore().then((response) => {
        console.log("获取店面列表", response.data.data);
        var date = response.data.data;
        this.storeList = date;
      });
    },
    distance(store) {
      if (JSON.stringify(this.location) != "{}") {
        var storePosition = [store.lng, store.lat];
        var userPosition = [
          this.location.position.lng,
          this.location.position.lat,
        ];
        // 返回 p1 到 p2 间的地面距离，单位：米
        var dis = AMap.GeometryUtil.distance(
          storePosition,
          userPosition
        );
        return dis / 1000;
      } else {
        return 0;
      }
      // return 0;
    },
    toStore(store) {
      Dialog.confirm({
        title: "提示",
        message: "确认切换门店",
      })
        .then(() => {
          console.log("门店切换：",store)
          this.$store.dispatch("setStoreInfo",store)
          this.$store.dispatch("setAction",1)
          this.$router.push("/commodity")
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style scoped>
.store {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 0.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.main {
  width: 100%;
  position: absolute;
  top: 2.1rem;
}
.storeCard {
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 0.1rem;
  background-color: #f7f7f7;
}
.left {
  width: 75%;
  border-right: 1px solid #fff;
}
.item {
  margin-bottom: 0.2rem;
}
.item span {
  margin-left: 0.1rem;
}
.state {
}
.right {
  width: 25%;
}
.distance {
}
.icons {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.1rem;
  margin-top: 0.3rem;
}
.icon {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: #fff;
  font-size: 18px;
  box-sizing: border-box;
  padding-top: 0.13rem;
}
</style>